Thank you 
Yes that’s a good idea to save using images but I would suggest a couple of small improvements.
As the original item was a background-image then it should be considered as decoration and that means keeping it out of the html wherever possible (although sometimes you just have no choice). In this case we could add the html entity via the CSS content property using the pseudo elements :before or :after.
Although the hr is a void element (no closing tag) it is an exception the the rule and is allowed to take :before and after: content.
Another thing to note is that the hr element indicates a thematic change rather than just being a horizontal line so its use should be semantic and having 2 hrs next to each other in the same div is not very semantic as it does not indicate thematic changes.
If we utilise the before and after elements and use the gradient from my example we can still use the html entity and reduce the html to one simple hr tag.
e.g.
<hr class="hr">
Very nice:slight_smile:
Although there may be slight styling issues in various browsers but this is inherent to the hr we can get pretty close in modern browsers.
I have added a second example to my codepen.
Note that the html entity is added to the content property with this rule.
`content:"\221E";`
If indeed there were styling issues we could get away with one div around the hr to aid styling and not harm the semantics too much.
Your idea was good and the example fine to demonstrate the effect. However once you have it working you should look at ways of improving and getting the semantics back into the html.
As I said its not always possible to have pure html but in most cases we can do a little better with a little extra thought.
3 Likes
Thank you for all the replies and suggestions.
Regarding the image, I will be converting it to an SVG and using it as an icon which will eliminate the use of the image.
1 Like
Just playing around now that the OP has a satisfactory answer.
Following is not semantic for normal use of tags, just decoration on the page.
But if you just wanted entities or SVG image decorations only on a horizontal display,
it does not get much simpler than this using a flex-box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> HR decorations </title>
<!-- From: https://www.sitepoint.com/community/t/image-in-the-middle-of-two-lines/336283/22 -->
<style>
.lcr {
width: 100%;
border: 0;
display: flex;
justify-content: space-between;
}
.ccup { font-size: 2em; }
</style>
</head>
<body>
<h1>Horizontal Flex Decorations</h1>
<p>Horizontal Decorations with entities</p>
<div class="lcr">
<div class="ccup"> ⛺ </div>
<div class="ccup"> ⚓ </div>
<div class="ccup"> ⛵ </div>
<div class="ccup"> ⚓ </div>
<div class="ccup"> ⛵ </div>
<div class="ccup"> ⚓ </div>
<div class="ccup"> ⛺ </div>
</div>
</body>
</html>This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.