How to display a bullet point in the middle of a paragraph?

HTML & CSS
1

Hello All,

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.)

Thanks!

2

Hi,
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.
1 Like
3

Try this working page in your browser.

The bullet can be any size or color and the font-size can be changed or zoomed.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/how-to-display-a-bullet-point-in-the-middle-of-a-paragraph/233966
Xizor
Aug 17,2016 8:17 PM
-->
    <style type="text/css">
span {
    display:inline-block;
    vertical-align:middle;
    color:#d00;
    font-size:1.5em;
    margin-top:-.25em;
}
    </style>
</head>
<body>

<p>Released April 13, 1992. <span>&bull;</span> Format Super Nintendo.</p>

</body>
</html>
1 Like
4

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">
<title>Untitled</title>
<style>
.format:before {
    vertical-align:middle;
    font:bold 1.5em/0 monospace; /* minimum line-height to not affect the paragraph's height */
    content:"\2022"; /* the Unicode number for &bull; */
}
</style>
</head><body>

<p>Released April 13, 1992. <span class="format"> Format Super Nintendo.</span></p>

</body></html>
2 Likes
5

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.:slight_smile:

time:after {
    vertical-align:middle;
    font:bold 1.5em/0 monospace; 
    content:"\2022";
}

<p>Released <time>April 13, 1992 </time> Format Super Nintendo.</p>
2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.