鉴于以下场景,为什么:after选择器需要内容属性才能运行？
.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
}<div class="test"></div>注意在指定content属性之前如何看不到伪元素:
.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
content:"hi";
}<div class="test"></div>为什么这是预期的功能？你会认为显示块会强制元素出现.奇怪的是,您实际上可以在Web调试器中看到样式; 但是,它们不会显示在页面上.
在下面的代码中，我有两个箭头指向我的 SoMe div，只要页面不调整大小，箭头就会附加到边框。
\n\n调整大小后，它会成为箭头和边框之间的空格。\n我希望可以将箭头添加为前后伪元素，而不是使用媒体查询。div.front-some:before但是当将箭头类别更改为和时，我没有设法使箭头出现div.front-some:after。
这是否有可能实现，或者媒体查询是我唯一的选择？
\n\n body {\r\n\t background: green;\r\n\t}\r\n\r\n\th1.title {\r\n\t color: red;\r\n\t text-align: center;\r\n\t text-transform: uppercase;\r\n\t letter-spacing: 20px;\r\n\t background: green;\r\n\t max-width: 70%;\r\n\t margin: -40px auto 0 auto;\r\n\t}\r\n\r\n\tdiv.inner {\r\n\t border: 4px solid red;\r\n\t color: #fff;\r\n\t padding: 15px 50px 50px 50px;\r\n\t margin-top: 100px;\r\n\t box-sizing: content-box;\r\n\t}\r\n\r\n\tdiv.some {\r\n\t text-align: center;\r\n\t background: green;\r\n\t max-width: 40%;\r\n\t margin: 0 auto -60px auto;\r\n\t}\r\n\r\n\t.arrow-right {\r\n\t border-right: 5px solid red;\r\n\t border-bottom: 5px solid red;\r\n\t width: 25px;\r\n\t height: 25px;\r\n\t transform: rotate(-45deg);\r\n\t margin-bottom: …