How do I make a post heading decoration - html

Question

I am trying to recreate the decorative line under the heading. Is there anyway that I can do this using just HTML and CSS? Does anyone have any experience in doing something similar?
I thought about doing something like this:
<p>———•———</p>
unfortunately the outcome is not as expected.

Answer 1

I would use a bottom border for the line and then a pseudo element for the dot.
The dot uses use border-radius to make the element spherical. Then we use background-color to make it white and set the border color to the same color as the background, allowing us to mask out parts of the bottom border.
body {
background-color: salmon;
}
h2 {
margin: 1rem 0 0.5rem;
padding-bottom: 0.5rem;
font: 2rem/1.25 Arial, sans-serif;
color: white;
border-bottom: 1px solid white;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
z-index: 5;
transform: translateX( -50% );
bottom: -13px; /* border thickness + half height */
left: 50%;
width: 6px;
height: 6px;
background-color: white;
border: 10px solid salmon;
border-radius: 50%;
}
<h2>Portfolio</h2>
One caveat with this approach is that you will need sufficient space between the dot and the text above, otherwise, the border thickness of the dot that is used to mask out the bottom border will overlay/mask your text. See example below:
body {
background-color: salmon;
}
h2 {
margin: 1rem 0 0.5rem;
padding-bottom: 0.5rem;
font: 2rem/1.25 Arial, sans-serif;
color: white;
border-bottom: 1px solid white;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
z-index: 5;
transform: translateX( -50% );
bottom: -23px; /* border thickness + half height */
left: 50%;
width: 6px;
height: 6px;
background-color: white;
border: 20px solid gold;
border-radius: 50%;
}
<h2>Portfolio</h2>
You could also do something similar but make the content of the pseudo element a bullet •.