Line before and after title over image [duplicate]

by

You can make a line on both sides of the title with 2 pseudo elements and borders:

  • This works over a transparent background (lines and title have transparent backgrounds).
  • The line length will adapt to the title width so they alway start and end at the same position regardless to title length.
  • The title can span on several lines while the left and right lines stay verticaly centered (Note that you need to wrap the title in a <span> tag for this to work. See demo)

Title with line before and after over an image

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}
<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>

More Related Contents:

  1. Speech bubble with arrow
  2. Transparent arrow/triangle indented over an image
  3. How can I show only corner borders?
  4. Invert rounded corner in CSS?
  5. Transparent hollow or cut out circle
  6. How to skew element but keep text normal (unskewed)
  7. Inset border-radius with CSS3
  8. How to make 3-corner-rounded triangle in CSS
  9. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  10. Is it possible to create an angled corner in CSS?
  11. Wave (or shape?) with border on CSS3
  12. How to draw a circle sector in CSS?
  13. How to create a curve on the top of a background?
  14. How can I create a “tooltip tail” using pure CSS?
  15. background image, linear gradient jagged edged result needs to be smooth edged
  16. Segments in a circle using CSS3
  17. How to make a circle around content using CSS?
  18. Adjacent divs with angled borders? [duplicate]
  19. Blocky gradient effect in CSS3
  20. How to create an irregular square shape in css?
  21. How to create a radial menu in CSS?
  22. Arrow Box with CSS
  23. Filling water animation
  24. Make CSS3 triangle with linear gradient
  25. Creating an Isoceles Trapezoid shape
  26. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  27. Make table cells square
  28. Rounded side, not rounded corners
  29. Making jagged triangle border in CSS
  30. How to create fluid trapezoid image with css?

Leave a Comment