Question 298613 in Html Question posted in
Some basic documentation can be found here.

Html – Paragraph break line hides half the emoji I want in the middle

I want to have a paragraph break with an emoji in the middle, but it keeps showing only the bottom half of the emoji. The top half gets hidden behind the hr-tag line (see image).

This is my CSS:

hr {
  width: 100%;
  margin: 5em 0em 5em 0em;
  padding: 0;
  border: none;
  border-top: medium double #E3E3E1;
  color: #675757;
  text-align: center;
}

hr:after {
  content: "˗ˏˋ☕ˎˊ˗";
  display: inline-block;
  position: relative;
  font-size: 25px;
  padding: 0 10px;
  top: -0.7em;
}

I want it to look like this (made with ms paint lol)

On the after-section I tried these:

  • changing display to "block"

  • adding a background colour to the after-section, but that still showed only the bottom half of it.

  • adding background-color: transparent

  • adding "border: 0;"

  • adding "z-index: 1;"

On the hr-section I tried these:

  • removing the color

All of these solutions led to the same result as in the screenshot above: the top half is hidden behind the line. Why?

It could be that I didn’t use the right combination of the above solutions. I don’t understand CSS enough to know.

Edit: noticed that my question got closed because there’s been a similar question. The answers to that one all point to a H2-solution though, where I’d put the emoji in the HTML/text. Is there no way to put the emoji in the CSS?
The reason is: I want it to be accesible for screenreaders, which would understand the HR-tag, but would try to read out the HTML everytime, which gets annoying.

Tags:

2

Answers


  1. 0

    The issue is basically with the positioning of the emoji and the hr tag overlapping. One way to resolve this(as I would do) is to use :before instead of :after to apply top, left and transform properties. Something like:

    hr {
  width: 100%;
  margin: 5em 0em 5em 0em;
  padding: 0;
  border: none;
  border-top: medium double #E3E3E1;
  color: #675757;
  text-align: center;
  overflow: visible;
  position: relative;
}

hr:before {
  content: "˗ˏˋ☕ˎˊ˗";
  display: inline-block;
  position: absolute;
  font-size: 25px;
  padding: 0 10px;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white; /* Set the background color of the content (emoji) to white, covering the hr border behind it */
}
    <p>
  This is a paragraph of text. There will be a custom styled horizontal rule below this paragraph with an emoji in the middle.
</p>
<hr>
<p>
  Here's another paragraph of text. The custom horizontal rule above should have an emoji in the middle without being cut off.
</p>
    Login or Signup to reply.
  2. 0 
    .pagebreak{
 margin: 20px 0;
 position: relative;
}
.line{
  width: 100%;
  height: 2px;
  background: gray;
}
.emoji{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}
    <div class="pagebreak">
  <div class="line"></div>
  <div class="emoji">emoji</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search