下面我有一些伪风格的标题
h2 {
position: relative;
display: inline;
}
h2::before {
content: "";
position: absolute;
background-color: #000;
width: 100vw;
height: 1px;
left: 100%;
margin-left: 20px;
top: 50%;
}
h2::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 50%;
transform: translate(-50%,-50%);
left: 100%;
border-radius: 50%;
border: 1px solid #000;
margin-left: 20px;
}
在 Firefox 中看起来不错,伪元素将保留在 h1 文本的第一行之后。
当我在 500 像素以下的小屏幕上以 Chrome 响应模式进行测试时,问题出现了。 display:inline
似乎不起作用。
是否有任何解决方法可以使 Chrome 像在 firefox 中一样显示我的伪代码?
最佳答案
First of all check this code, this works perfectly same in both browsers,
body {
overflow-x: hidden;
}
h2 {
position: relative;
display: inline-block;
clear: both;
float: left;
}
h2::before {
content: "";
position: absolute;
background-color: #000;
width: 100vw;
height: 1px;
left: 100%;
margin-left: 20px;
top: 14px;
}
h2::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 14px;
transform: translate(-50%, -50%);
left: 100%;
border-radius: 50%;
border: 1px solid #000;
margin-left: 20px;
}
<h2>Lorem ipsum dolor sit amet, eiusmod tempor </h2>
<h2>Lorem ipsum dolor sit amet, <br> eiusmod tempor </h2>
<h2>Lorem ipsum dolor sit amet, <br> eiusmod tempor <br> eiusmod tempor</h2>
错误是 display: inline;
在两个浏览器中以两种不同的方式检测到。
这导致 ::before
和 ::after
在两个浏览器中的位置发生变化。/p>
我通过将 display: inline;
更改为 display: inline-block;
解决了这个问题,希望对你有所帮助。
关于css - Pseudo::before::after inline heading on Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51667204/