CSS 伪元素 :before 和 :after 继承原始元素的宽度/高度

在本文中，我们将介绍CSS伪元素:before和:after如何继承原始元素的宽度和高度，并通过示例说明其使用方法。

阅读更多：CSS 教程

:before 和 :after 伪元素

在CSS中，伪元素是用来添加特定样式效果而不需要在HTML中添加额外的元素的一种方式。其中，:before和:after是两个最常用的伪元素。

:before伪元素在选中元素的内容之前插入特定内容，其属性选择器为:before。
:after伪元素在选中元素的内容之后插入特定内容，其属性选择器为:after。

继承原始元素的宽度和高度

通常情况下，伪元素:before和:after默认是内联元素，它们的宽度和高度默认为0。但是，通过CSS的属性设置，我们可以使它们继承原始元素的宽度和高度。

下面是一个示例，展示了如何使用伪元素:before和:after来创建一个带有圆角和阴影效果的按钮，并使伪元素继承按钮的宽度和高度。

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  width: 200px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  border-radius: inherit;
}

.button:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: inherit;
  height: 10px;
  background-color: #666;
  border-radius: 0 0 inherit inherit;
  z-index: -1;
}
</style>
</head>
<body>

<button class="button">Click Me</button>

</body>
</html>

在上述示例中，我们首先定义了一个.button类，设置了其宽度为200px，高度为50px，背景颜色为绿色，字体颜色为白色，并添加了圆角效果。然后，我们使用伪元素:before在按钮的前面插入了一个半透明黑色背景，并将宽度和高度设置为继承自按钮。我们还使用伪元素:after在按钮的下方插入了一个阴影效果，并使宽度继承自按钮。

通过这种方式，我们可以方便地创建具有特殊效果的按钮，而不需要在HTML中添加额外的元素。