记录一下项目中遇到的问题,代码如下,效果如图
.selected::before{
content: ' ';
border: 1px solid black;
width: 10px;
height: 10px;
background-color: lightgray;
}
问题:明明设置了宽度,但是没起效果
解决:设置伪元素为块级元素或者内联块级元素
.selected::before{
content: ' ';
display: inline-block;
border: 1px solid black;
width: 10px;
height: 10px;
background-color: lightgray;
}
思考:伪元素默认为inline,行内元素,行内元素的特点是不会接受宽度和高度属性的设置,因为他们的尺寸是由内容决定的,不会独占一行,而是和其他行内元素一起水平排列,span也是这样。
解决方法就是设置为元素的display属性为块级元素(block)或者内联块级元素(inline-block),这样就可以设置宽高了,两个的区别也在于需不需要这个伪元素和容器位于同一行,因为我需要在文本前展示方框,所以设置为在同一行的inline-block。
之前一直对行内元素,块级元素和内联块级元素没有概念,就是不太明白为什么要设置这几种,这个例子比较生动的展示了他们的区别和应用场景。