So I'm busy with this real simple coming soon template, and now I need to make a horizontal dash. I refer to the picture at the bottom of this post. Is there any way in HTML or in CSS to do this?
Asked
Active
Viewed 7,349 times
-1
-
5Please search before you ask. http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle – Jack Song Jul 17 '14 at 02:28
2 Answers
2
kind of a hacky solution, but you can use dashes (or longer dashes like in my case), reduce the letter spacing on the dashes, or use a font with no space between the characters to put them next to each other.
HTML
<p>――― <span>Coming Soon</span> ―――</p>
CSS
p { font-family: Arial; letter-spacing: -2px;}
p span { letter-spacing: 2px; margin: 0 5px; }
example fiddle: http://jsfiddle.net/D5nA2/
kennypu
- 5,950
- 2
- 22
- 28
2
The character you want to use is the "em-dash", HTML entity —. In typesetting it is defined as a dash that is the full width of the widest character in the font (usually the letter M).
If you string several together in a row, as in ———— (4 em-dashes) you can make a dash of whatever length you want (in increments of M widths).
In variable-width fonts (where each character can have a different width bounding-box) there's also the "en-dash", –, which is defined (in typesetting) as ½ the width of the em-dash. Here's a string of 4 en-dashes: –––– Of course the en-dash won't join up into a solid line in fixed-width fonts.
Jim Garrison
- 85,615
- 20
- 155
- 190