Question

我正在创建一些标签 - 并且有一些像这样的标记

<div class="tag">Tag</div>

这将创建一个小的白色边框圆形标记。它可能有不同的媒体变体，在这种情况下想要在标签上添加一个图标，我正在尝试设计较少的但它没有占用。

<div class="tag .get_app">Tag</div>
<div class="tag .get_app">Tag</div>
<div class="tag .get_app">Tag</div>

http://jsfiddle.net/pg886/182/

.tag {
  position: absolute;
  top: 0;
  left: 0;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 11px 35px 9px 20px;
  color: pink;
  background: white;
  display: inline-block;
  text-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  font-family: Roboto, sans-serif;
  &::after {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 50%;
    background: red;
    padding: 4px;
    display: inline-block;
    color: white;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    .get_app & {
      content: "\E884";
    }
    .play_arrow & {
      content: "\E037";
    }
    .volume_up & {
      content: "\E050";
    }
  }
}

Answer 1

首先，您在HTML中编写了错误的类。你需要像这样添加它们：

<div class="tag get_app">Tag</div>
<div class="tag play_arrow">Tag</div>
<div class="tag volume_up">Tag</div>

额外的类也在标记类上，因此您需要将它们设置正确：

.tag {
  position: absolute;
  top: 0;
  left: 0;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 11px 35px 9px 20px;
  color: pink;
  background: white;
  display: inline-block;
  text-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  font-family: Roboto, sans-serif;
  &::after {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 50%;
    background: red;
    padding: 4px;
    display: inline-block;
    color: white;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    text-transform: none;
  }

  &.get_app::after {
    content: "\E884";
  }
  &.play_arrow::after {
    content: "\E037";
  }
  &.volume_up::after {
    content: "\E050";
  }
}

JS Fiddle

Answer 2

您的LESS文件和HTML类

中的语法错误

这是updated fiddle

你的遗憾.tag应如下所示：

.tag {
  position: absolute;
  top: 0;
  left: 0;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 11px 35px 9px 20px;
  color: pink;
  background: white;
  display: inline-block;
  text-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  font-family: Roboto, sans-serif;

  &::after {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 50%;
    background: red;
    padding: 4px;
    display: inline-block;
    color: white;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    text-transform: none;

  }

  &.get_app:after {
      content: "\E884";
    }
    &.play_arrow:after {
      content: "\E037";
    }
    &.volume_up:after {
      content: "\E050";
    }
}

您已将课程.放入实际的HTML课程中：

<div class="tag .get_app">Tag</div>

应该是：

<div class="tag get_app">Tag</div>

嵌套较少的标签css

2 个答案: