使用以下内容向div添加第二个元素：after

Question

您好我跟随div：

＆＃13;

＆＃13;

.box {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}
.box:after {
  content: '';
  width: 20px;
  height: 20px;
  background-color: blue;
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

我想使用伪类.box向after添加第二个div。我认为它会像这样工作，但没有任何反应。它应该是这样的：

如何使用after？

执行此操作

感谢。

Answer 1

你的代码是正确的，唯一缺少的是该元素的属性显示。只需在 Notification notif = new Notification.Builder(mContext) .setContentTitle("New photo from " + sender.toString()) .setContentText(subject) .setSmallIcon(R.drawable.new_post) .setLargeIcon(aBitmap) .setStyle(new Notification.BigPictureStyle() .bigPicture(aBigBitmap)) .build(); 元素上添加display: block即可。要轻松操作伪元素，请创建主要元素:after，然后将position: relative设为:after，并根据position: absolute .box放置它，类似于这个：

div

如果您确实需要其他div，请尝试添加一些javascript，例如

.box {
  width: 100px;
  height: 20px;
  border: 1px solid black;
  position: relative; /* Made it relative */
}
.box:after {
  content: '';
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  top: -1px; /* To compensate the border on the main element */
  background-color: blue;
  left: 100%; /* To place it after the main element */
}

Answer 2

.box {
  width: 100px;
  height: 20px;
  position: relative;
  border: 1px solid black;
}
.box:after {
  content: '';
  width: 20px;
  bottom: -1px;
  right: -21px;
  top: -1px;
  position: absolute;
  background-color: blue;
}

<div class="box"></div>

Answer 3

试试这个

＆＃13;

＆＃13;

.box {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}
.box:after {
  content: '';
  width: 20px;
  height: 20px;
  background-color: blue;
  display:block;
  float:right;
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;