In place of something like a horizontal rule or div border, I'd like to do something like this:
My Title
/*----------------------*/
My content
Notice how the divider between the Title and content is literally a slash, asterix, dashes, and then an asterix and slash to end (it's supposed to look like code).
I'm curious how I could achieve this effect on a fluid layout, with the divider stretching to fill the whole width of the div. Also, I'd like to not use any art for this. Just using ascii would be perfect.
Summary: How can I create a dynamically resizing custom ascii divider? I'm pressuming this will probably have to be done mostly in Javascript and then polling the width of the div everytime the window is resized, and then calculating the length of characters (it's a monospace font) required to fill that space. Is this on the right track?
What a great question, had a lot fun messing around making this CSS only solution.
(This needs to be tweaked for each new font family due differences in kerning but it should hold up reasonably well at different font sizes of the same family.)
hr {
/* reset */
display: inline-block;
border: none;
/* sizing */
box-sizing: border-box;
width: 100%;
height: 0.1em;
/* dashes */
background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 80%, transparent 80%); /* space */
background-size: 0.4em 0.4em; /* dash */
/* spacing between start/end */
padding: 0 0.7em;
background-clip: content-box;
/* anchor ::before/::after */
position: relative;
}
/* start/end */
hr::before,
hr::after {
position: absolute;
top: -0.5em;
}
hr::before {
content: '/*';
left: -0.1em;
}
hr::after {
content: '*/';
right: -0.1em;
}<hr>Editable demo: http://jsbin.com/tefuli/2