Question

我想知道如何在::after伪元素中格式化内容CSS？

我正在尝试使用h1标题，其左侧和右侧都有小图像。

到目前为止我的代码：

HTML：

<h1>This Week's Photo Features</h1>

CSS：

h1 {
  text-align: center;
}

h1:before {
  content: ("images/NikonD100_40x30.jpg");
}

Answer 1

content属性可以使用以下格式接受网址：

content: url("the url")

<强>演示：

＆＃13;

h1 {
  text-align: center;
}

h1:before {
  content: url("http://lorempixel.com/40/40/animals");
}

h1:after {
  content: url("http://lorempixel.com/40/40/cats");
}

＆＃13;

<h1>This Week's Photo Features</h1>

＆＃13;

另一种选择是将图像设置为伪元素的背景：

<强>演示：

＆＃13;

h1 {
  text-align: center;
}

h1:before, h1:after {
  display: inline-block;
  width: 40px;
  height: 40px;
  content: '';
}

h1:before {
  background: url("http://lorempixel.com/40/40/animals");
}

h1:after {
  background: url("http://lorempixel.com/40/40/cats");
}

＆＃13;

<h1>This Week's Photo Features</h1>

＆＃13;

如果您将图像用作背景，则可以使用H1元素上的多个背景来抛弃伪元素。

<强>演示：

＆＃13;

h1 {
  height: 40px;
  padding: 0 40px;
  text-align: center;
  background: url("http://lorempixel.com/40/40/animals") left no-repeat, url("http://lorempixel.com/40/40/cats") right no-repeat;
}

＆＃13;

<h1>This Week's Photo Features</h1>

＆＃13;

使用：before和：after伪元素与图像

1 个答案: