之前和之后的psuedo选择器在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露出您的CSS代码，因为它在我的chrome和Edge浏览器上正常工作。 但无法在您的身边工作，因此我已如上所述修改了您的CSS：

Answer 2

您可以尝试将before元素的位置更改为绝对位置，然后将其位置设置为right和top：

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

}

Answer 3

您可以通过定位解决此问题。

graph