伪元素设置宽度没反应

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

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

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