How can I make a fieldset legend-style “background line” on heading text?

by

See: http://jsfiddle.net/thirtydot/jm4VQ/

If the text needs to wrap, this won’t work. In IE7, there will be no line.

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

More Related Contents:

  1. How to use HTML to print header and footer on every printed page of a document?
  2. Could someone explain this CSS code?
  3. How do I hide an element when printing a web page?
  4. ::slotted CSS selector for nested children in shadowDOM slot
  5. Aligning grid items across the entire row/column (like flex items can)
  6. How can I force browsers to print background images in CSS?
  7. Is there any way to hover over one element and affect a different element? [duplicate]
  8. Is embedding background image data into CSS as Base64 good or bad practice?
  9. How to change an input button image using CSS
  10. Relationship between !important and CSS specificity
  11. Specify an SVG as a background image and ALSO style the SVG in CSS?
  12. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  13. Add a css class to a field in wtform
  14. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  15. CSS transitions with calc() do not work in IE10+
  16. Make children divs the height of tallest child
  17. Remove “whitespace” between div element
  18. Blocky gradient effect in CSS3
  19. Two Divs next to each other, that then stack with responsive change
  20. I want to vertical-align text in select box
  21. Sub-Pixels calculated and rendered differently among browsers
  22. Arrow Box with CSS
  23. Fill only Half a star with SVG
  24. How to add a margin to a table row [duplicate]
  25. Clip/Crop background-image with CSS
  26. CSS negative z-index: what does it mean?
  27. How to make a Bootstrap 4 full width dropdown in Navbar?
  28. Why doesn’t my child element inherit color from its parent when parent has more specific selector?
  29. Stacking DIVs on top of each other?
  30. Div with cut out edges, border and transparent background

Leave a Comment