Question

为什么不是一个伪元素在所有边上都有相等的填充？

当右/左填充是顶部/底部填充的1.5倍时，我只能实现方形伪元素。

见下面的代码。

button{
  width: 200px;
  height: 100px;
  background: gray;
  border:none;
  font-size:16px;
}

.icon::before {
    // position: relative;
    padding: 20px;
    content: "";
    background: black; 
}

.icon2::before {
    padding: 20px 30px;
    content: "";
    background: black; 
}

<p>Pseudo element: padding on all sides is 20px.</p>
<button class="icon">
  Click Me
</button> 

<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p>
<button class="icon2">
  Click Me
</button>

Answer 1

因为默认情况下它被视为内联元素，font-size会影响元素的大小。更改font-size: 0;或添加具有匹配高度/宽度的display: block;，它将是一个正方形。

＆＃13;

button{
  width: 200px;
  height: 100px;
  background: gray;
  border:none;
  font-size:16px;
}

.icon::before {
    // position: relative;
    padding: 20px;
    content: "";
    background: black; 
    display: block;
    width: 0;
    height: 0;
}

.icon2::before {
    padding: 20px;
    content: "";
    background: black; 
    font-size: 0;
}

＆＃13;

<p>Pseudo element: padding on all sides is 20px.</p>
<button class="icon">
  Click Me
</button> 

<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p>
<button class="icon2">
  Click Me
</button>

＆＃13;

Answer 2

请参阅迈克尔的答案，以回答问题中的原因。

我想指出的是，大多数情况下， title 的答案是使用百分比填充相对于事物宽度的事实。是的，宽度，而不是高度。即您可以添加padding-bottom: 100%以获得正方形。或者使62.5％达到16：9的比例，例如：对于视频。

.square {
  width: 100px;
}

.square::before {
  display: block;
  content: '';
  padding-bottom: 100%;
  border: 1px solid red;
}

<div class="square"></div>

Answer 3

生成的内容从父级继承font-size及其行高。

您可以重置字体大小以隐藏两者或仅隐藏行高。

button{
  width: 200px;
  height: 100px;
  background: gray;
  border:none;
  font-size:16px;
}

.icon::before {
    font-size:0;/* remove space used from inserted text and line-height*/
    padding: 10%;/* 10% of 200px width is 20px */
    vertical-align:middle;/* can be usefull;*/
    margin-right:0.25rem;/* keep away from next phrasing content */
    content: "";
    background: black; 
}

.icon2::before {
    padding: 20px 30px;
    content: "";
    background: black; 
}

<p>Pseudo element: padding on all sides is 20px.</p>
<button class="icon">
  Click Me
</button> 

<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p>
<button class="icon2">
  Click Me
</button>

仅使用填充制作方形伪元素

3 个答案: