I am trying to create a single line in HTML and CSS that look like
Released April 13, 1992. * Format Super Nintendo.
With the bullet point between the date and the format. How would I go about this? If I make this a List item it won’t display, it will drop the Format to a new line.(Because of it being a block level element.)
You can hard code the bullet in the html using ```
Released April 13, 1992. • Format Super Nintendo.
Another way would be to use a span as display: inline-block; with a bullet background image. You can set dimensions using inline-block.
Try this working page in your browser.
The bullet can be any size or color and the font-size can be changed or zoomed.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Aug 17,2016 8:17 PM
<p>Released April 13, 1992. <span>•</span> Format Super Nintendo.</p>
Taking @ronpat’s solution but in a pseudo element, just for the the semantics.
(Choosed monospace for a more accurate middle position.)
<!doctype html><html lang="en"><head><meta charset="utf-8">
font:bold 1.5em/0 monospace; /* minimum line-height to not affect the paragraph's height */
content:"\2022"; /* the Unicode number for • */
<p>Released April 13, 1992. <span class="format"> Format Super Nintendo.</span></p>
Working from @Erik_J’s pseudo element method. I would be inclined to use the
<time> element since this would be an appropriate use of it.
font:bold 1.5em/0 monospace;
<p>Released <time>April 13, 1992 </time> Format Super Nintendo.</p>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.