CSS technique for a horizontal line with words in the middle

by

This is roughly how I’d do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

I tested in Chrome only, but there’s no reason it shouldn’t work in other browsers.

JSFiddle: http://jsfiddle.net/7jGHS/

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Menu does not align correctly in Safari
  3. What is a clearfix?
  4. How do I style a dropdown with only CSS?
  5. css ‘pointer-events’ property alternative for IE
  6. Browsers’ default CSS for HTML elements
  7. How to align checkboxes and their labels consistently cross-browsers
  8. Style input type file? [duplicate]
  9. How can I draw vertical text with CSS cross-browser?
  10. Remove white space above and below large text in an inline-block element
  11. Cross-browser custom styling for file upload button [duplicate]
  12. How to make HTML Text unselectable [duplicate]
  13. Flexbox and Internet Explorer 11 (display:flex in ?)
  14. Flexbox alternative for IE9
  15. Setting a width and height on an A tag
  16. Image scaling causes poor quality in firefox/internet explorer but not chrome
  17. Fallback for CSS attributes without unit
  18. Extra space under textarea, differs along browsers
  19. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  20. How to make input autofocus in internet explorer?
  21. Cross browser method to fit a child div to its parent’s width
  22. Which browsers support data URIs and since which version?
  23. Which way to implement this picture in HTML CSS code and bootstrap
  24. Is it possible to set the equivalent of a src attribute of an img tag in CSS?
  25. AngularJS ngClass conditional
  26. Line break (like ) using only css
  27. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  28. How to run the CSS3 animation to the end if the selector is not matching anymore?
  29. Why aren’t my bootstrap 4 columns the same height?
  30. Why does a border increase the element’s width?

Leave a Comment