伪元素设置宽度没反应

本文主要是介绍伪元素设置宽度没反应，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

记录一下项目中遇到的问题，代码如下，效果如图

.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。

之前一直对行内元素，块级元素和内联块级元素没有概念，就是不太明白为什么要设置这几种，这个例子比较生动的展示了他们的区别和应用场景。

这篇关于伪元素设置宽度没反应的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---