До и после psuedo selecter не работает в Chrome

Question

Я ушел и создал собственный HR, но по какой-то причине содержимое элемента before находится за двойными строками в Chrome и Edge.Отлично работает в Firefox ... Вот мой код ...

.dividerHR {
  float:left;
  padding:0;
  border:none;
  border-top:double medium #999;
  color:#999;
  text-align:center;
  width:90%;
  margin:0 5%;
  text-shadow: 0 0 2px rgba(0,0,0,.8)
 }
.dividerHR::before {
  content:'< Coding Poetry />';
  background:#181818;
  display:inline-block;
  position:relative;
  top:-12px;
  font-size:12px;
  padding:0 0.25em; 
  text-shadow:0 0 2px rgba(0,0,0,.8)
 }

Большое спасибо.это в Chrome ...

И это в Firefox ...

Answer 1

Добавьте position:relative к классу. dividerHR и измените position:relative на absolute на .dividerHR::before

Вот обновленное решение:

.dividerHR {
  float: left;
  padding: 0;
  border: none;
  border-top: double medium #999;
  color: #999;
  text-align: center;
  width: 90%;
  margin: 0 5%;
  text-shadow: 0 0 2px rgba(0, 0, 0, .8);
  position: relative;
}

.dividerHR::before {
  content: '< Coding Poetry />';
  background: #181818;
  display: inline-block;
  position: absolute;
  top: -10px;
  font-size: 12px;
  padding: 0 0.25em;
  text-shadow: 0 0 2px rgba(0, 0, 0, .8)
}

<div class="dividerHR"></div>

Примечание: @Phillip Dews ваш код CSS, поскольку он отлично работает в моих браузерах Chrome и Edge.но не работаю на вашей стороне, поэтому я изменил ваш CSS, как указано выше:

Answer 2

Вы можете решить это путем позиционирования.

.dividerHR {
    position: relative;
    float: left;
    padding:0;
    border:none;
    border-top:double medium #999;
    color:#999;
    text-align:center;
    width:90%;
    margin:0 5%;
    text-shadow: 0 0 2px rgba(0,0,0,.8)
}
.dividerHR::before {
    content:'< Coding Poetry />';
    background:#181818;
    display:inline-block;
    position:absolute;
    top:-12px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    font-size:12px;
    padding:0 0.25em; 
    text-shadow:0 0 2px rgba(0,0,0,.8)
}

Answer 3

вы можете попробовать изменить положение элемента before до абсолютного, а затем положение с правым и верхним:

.dividerHR::before {
content: '< Coding Poetry />';
background: #181818;
display: inline-block;
position: absolute;
top: 2px;
right: 111px;
font-size: 12px;
padding: 0 0.25em;
text-shadow: 0 0 2px rgba(0,0,0,.8);

}