Question

我正在学习CSS，我在识别属性和理解一些语法方面遇到了一些麻烦。在CSS下面。

.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {

}

我了解标签是一个类，html中nav li类中tab-current类的tabs将使用相同的CSS。

示例：

        <div class="tabs">
            <nav>
                <ul>
                    <li class="tab-current">Hey</li>
                    <li>hello</li>
                </ul>
            </nav>
        </div>

但我不太确定:before和:after代表什么。有人可以给我一个例子吗？谢谢

Answer 1

他们在您选择的元素之前和之前设置了一些内容。例如：

p:after {
    content: 'hi! im after';
}

p:before {
    content: 'hi! im before';
}

如果看到this fiddle，您会更好地理解。

Answer 2

:before和:after为其应用的元素创建伪元素作为“子元素”。它们通常用于某些样式或错误消息。

小提琴：http://jsfiddle.net/XjUM8/1/

div:before {
    content: "Before";
    background: red;
}

div:after {
    content: "After";
    background: blue;
    color: white;
}

您也可以设置它们以显示悬停

小提琴：http://jsfiddle.net/XjUM8/2/

div:hover:before {
    content: "Before";
    background: red;
}

div:hover:after {
    content: "After";
    background: blue;
    color: white;
}

另外，看看MDN： Before＆amp; After

Answer 3

:before和:after是CSS选择器，允许您在相关元素之前或之后添加内容。一个例子是在显示进度的链接后添加箭头：

HTML

<div class="testAfter"><a>Arrow After this link</a></div>
<div class="testBefore"><a>Arrow Before this link</a></div>

CSS

.testAfter:after{
    content:"\25B6"
}
.testBefore:before{
    content:"\25C0"
}

小提示： http://jsfiddle.net/yPkVL/1/

你可以添加各种东西;图像，文本等。您可以设置它们的样式并添加不同的位置。你可以做各种各样的事情。这就像在有问题的div之前或之后添加一个额外的div而不必更改HTML标记。

参考：

Before

After

Answer 4

:after和:before被称为伪元素。他们习惯通过CSS向DOM注入一些内容。

例如，假设您想在每个定位外部网站的链接后添加一个图标（我们假设这些链接都以＃34; http：//＆＃34;开头）。这是一个真正的痛苦，试图手动追加这个。使用CSS伪元素:after，您可以简单地执行以下操作：

a[href^="http://"]:after {
  content:url('href.png');
}

和bam！你很高兴。

:after和:before允许您简单地注入一些文字或图片，但也可以使用它们in many creative ways。

要注意，它们可以应用于除了＆＃34;替换元素之外的任何内容＆＃34; ：这意味着您无法在<input>，<textarea>，<object>，<img>等标记上使用这些伪元素。

Answer 5

W3School explains it pretty well，你读过这本书并且不明白吗？

基本上它意味着你要插入之前区域中的内容，然后内容已经在那里，并且：在内容之后。

：在选择器之前和之后，它们用于选择要设置样式的内容。

example on w3schools is as follows：

<!DOCTYPE html>
<html>
  <head>
   <style>
      p::before
      {
        content:"Read this -";
      }
    </style>
  </head>

  <body>
    <p>My name is Donald</p>
    <p>I live in Ducksburg</p>

    <p><b>Note:</b> For ::before to work in IE8, a DOCTYPE must be declared.</p>

  </body>
</html>

这样做是打印出来的： Read this - My name is Donald和Read this - I live in Duksburg

之后将完全做同样的事情。

有

CSS标签：之前和之后

5 个答案: