Как максимизировать работу и ценность css’контента💢

CSS
Как максимизировать работу и ценность css’контента💢

contentсвойства должны соответствоватьbeforeиafterПсевдоэлементы используются вместе для определения伪元素Отображаемый контент в основном указан в этой статье.contentНеобязательные значения и практические кейсы и советы по 🎃

Основное использование

Простой пример:

<p>「不会写前端」</p>

p {
  &::before {
    content: "欢迎关注"
  }

  &::after {
    content: "微信公众号"
  }
}

Браузер показывает этот суб-суб:

Давайте посмотрим на структуру, отображаемую в браузере:

Правильно, это так грубо, как и их имена, одно за другим 😁

Стоит отметить, что в новой спецификации одиночное двоеточие относится к伪类, двойное двоеточие относится к伪元素, даже если ты напишешь:after, стандартные браузеры по-прежнему будут отображаться как::after, цель состоит в том, чтобы быть совместимым со старым письмом 👍

Возможные значения

  1. нормальные персонажи
  2. unicode
  3. attrфункция
  4. urlфункция
  5. counterфункция
  6. cssПеременная

использовать один за другим

Чтобы статья была краткой, ниже есть разделыcontentАтрибуты опускают родительский элемент во внешнем слое:

// 原始
p {
  &::after {
    content: "";  
  }
}

// 省略后
content: "";

1. Обычные персонажи

content: "我是文字内容";

2. unicode

Специальные символы, поставляемые вместе с браузером:

p {
  &:after {
    content: "\02691";
    color: red;
  }
}

Дисплей выглядит следующим образом:

Таблица сравнения специальных символов HTML

iconfontПользовательские иконки шрифтов:

<span class="icon icon-close"></span>

@font-face {
  font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1209853_ok7e8ntkhr.ttf?t=1560857741304') format('truetype');
}

.icon {
  font-family: "iconfont";
}

.icon-close::before {
  content: "\e617";
}

Дисплей выглядит следующим образом:

iconfont-Alibaba библиотека векторных иконок

3. функция атрибута

Как следует из названия, эта функция может получитьhtmlЗначение атрибута в элементе, напримерid,class,styleподожди 😍

<p data-content="我是文字内容"></p>

content: attr(data-content);

4. URL-функция

Показать мой аватар Nuggets:

content: url("https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/7/16c681a0fb3e84c4~tplv-t2oaga2asx-image.image");

Дисплей выглядит следующим образом:

Минус в том, что нельзя контролировать размер картинки 😂

5. функция счетчика

counterФункция функции состоит в том, чтобы вставить значение счетчика, при этомcontentАтрибуты могут отображать значение в счетчике 🎲, прежде чем вводить использование, вы должны быть знакомы с двумя атрибутамиcounter-resetиcounter-increment😎

counter-resetРоль заключается в определении счетчика:

counter-reset: count1 0; // 声明一个计数器count1，并从0开始计算
counter-reset: count2 1; // 声明一个计数器count2，并从1开始计算
counter-reset: count3 0 count4 0 count5 0; // 声明多个计数器

counter-incrementУвеличьте значение счетчика, что можно понимать какjavascriptсередина+=:

counter-reset: count 0;
counter-increment: count 2; // 使count自增2，当前count的值为2
counter-increment: count -2; // 使count自增-2，当前count的值为-2

Обратите внимание, что счетчик здесьcountПочему значение не изменилось обратно0, что можно понимать как переопределение стиля, как в следующем коде:

div {
  width: 100px;
  width: 200px; // 实际渲染的宽度
}

6. css-переменные

При отображении переменных, если переменнаяstringТип может отображаться напрямую, если онintтип, вам нужно заимствоватьcounterфункция 😒

// string类型
--name: "不会写前端";

p {
  &::after {
    content: var(--name); // 显示为"不会写前端"
  }
}

---------- 我是分割线 ----------

// int类型
--count: 60;

p {
  &::after {
    counter-reset: color var(--count);
    content: counter(count); // 显示为"60"
  }
}

---------- 我是分割线 ----------

// 不支持的类型及情况
--count: 60.5; // 显示为"0"，不支持小数
--count: 60px; // 显示为""，不支持css属性值

соединение

Обычная конкатенация строк:

content: "xxx" + "xxx";

Функция конкатенации строк:

// 不能使用 + 连接符，也可以不需要空格，这里只是为了区分
content: "我支持" attr(xx);
count: "我的掘金头像：" url("xxxxx");
content: "计数器的值为：" counter(xx);

Неявное преобразование:

content: 0; // 显示为""
content: "" + 0; // 显示为"0"
content: "" + attr(name); // 显示为"attr(name)"

Практический случай

1. Когда содержимое тега a пусто, отобразите егоhrefЗначение в свойстве:

<a href="https://juejin.cn/user/2911162518997064"></a>

a {
  &:empty {
    &::after {
      content: "链接内容为：" attr(href);
    } 
  }
}

Дисплей выглядит следующим образом:

2. Панировочные сухари и разделители

<ul>
  <li>首页</li>
  <li>商品</li>
  <li>详情</li>
</ul>

ul {
  display: flex;
  font-weight: bold;

  li {
    &:not(:last-child) {
      margin-right: 5px;
        
      &::after {
        content: "\276D";
        margin-left: 5px;
      }
    }
  }
}

Дисплей выглядит следующим образом:

Я уже писал это 😂

<li v-for="(item, index) in list">
  <span>{{item}}</span>
  <span v-show="index < list.length - 1">、</span>
</li>

3. Индикатор выполнения

<div class="progress" style="--percent: 14;"></div>
<div class="progress" style="--percent: 41;"></div>
<div class="progress" style="--percent: 94;"></div>

.progress {
  width: 400px;
  height: 17px;
  margin: 5px;
  color: #fff;
  background-color: #f1f1f1;
  font-size: 12px;

  &::before {
    counter-reset: percent var(--percent);
    content: counter(percent) "%"; // 文字显示
    
    display: inline-block;
    width: calc(100% * var(--percent) / 100); // 宽度计算
    max-width: 100%; // 以防溢出
    height: inherit;
    text-align: right;
    background-color: #2486ff;
  }
}

Дисплей выглядит следующим образом:

Добавьте эффект перехода:

transition: width 1s ease; // 页面首次进入没有过渡效果，因为width必须要发生变化才行

У вас не может быть обоих, если вы полагаетесь только наcss, если вы хотите вызвать эффект анимации при входе на страницу в первый раз, толькоanimationпросто сделай это 😭

.progress {
  &::before {
    // 移除width跟transition属性
    animation: progress 1s ease forwards;
  }
  
  @keyframes progress {
    from {
      width: 0;
    }

    to {
      width: calc(100% * var(--percent) / 100);
    }
  }
}

После обновления страницы эффект следующий:

Справочная статья:Советы: Как отобразить значение переменной CSSvar с помощью свойства content

4. подсказка

<button data-tooltip="我是一段提示">按钮</button>

[data-tooltip] {
  position: relative;
  
  &::after {
    content: attr(data-tooltip); // 文字内容
    display: none; // 默认隐藏
    position: absolute;
    
    // 漂浮在按钮上方并居中
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
    
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    background-color: #313131;
    white-space: nowrap;
    z-index: 1;
  }
    
  // 鼠标移入button的时候显示tooltip
  &:hover {
    &::after {
      display: block;
    }
  }
}

Эффект следующий:

Многонаправленность, тематика, реализация анимации можно переместить в статью, которую я писал ранее:Используйте css'content для реализации императивных текстовых подсказок во всплывающей подсказке🤡

5. Подсчитайте количество выбранных флажков

<form>
  <input type="checkbox" id="one">
  <label for="one">波霸奶茶</label>
  <input type="checkbox" id="two">
  <label for="two">烤奶</label>
  <input type="checkbox" id="three">
  <label for="three">咖啡</label>
  
  <!-- 输入结果 -->
  <div class="result">已选中：</div>
</form>

form {
  counter-reset: count 0;
  
  // 当checkbox选中的时候，计数器自增1
  input[type="checkbox"] {
    &:checked {
      counter-increment: count 1;
    }
  }
  
  // 输出结果
  .result {
    &::after {
      content: counter(count);
    }
  }
}

Эффект следующий:

6. Добавьте количество глав в оглавление

<!-- 章节 -->
<ul class="section">
  <li>
    <h1>自我介绍</h1>

    <!-- 子章节 -->
    <ul class="subsection">
      <li>
        <h2></h2>
      </li>
      <li>
        <h2></h2>
      </li>
    </ul>
  </li>
  
  <li>
    <h1>写一段css代码</h1>
  </li>
</ul>

// 章节
.section {
  counter-reset: section 0; // 外层计数器

  h1 {
    &::before {
      counter-increment: section 1; // 自增1
      content: "Section"counter(section) ". ";
    }
  }

  // 子章节
  .subsection {
    counter-reset: subsection 0; // 内层计数器

    h2 {
      &::before {
        counter-increment: subsection 1; // 自增1
        content: counter(section) "."counter(subsection); // 计数器是有作用域的，这里可以访问外层计数器
      }
    }
  }
}

Дисплей выглядит следующим образом:

7. Загрузка... анимация

<p>加载中</p>

p {
  &::after {
    content: ".";
    animation: loading 2s ease infinite;

    @keyframes loading {
      33% {
        content: "..";
      }

      66% {
        content: "...";
      }
    }
  }
}

Эффект следующий:

8. Нет больше данных

<div class="no-more">无更多数据</div>

.no-more {
  &::before {
    content: "——";
    margin-right: 10px;
  }


  &::after {
    content: "——";
    margin-left: 10px;
  }
}

Эффект следующий:

Суммировать

contentвсегда нужно сотрудничествоbeforeиafterПсевдоэлементы используются, в основном, для отображения некоторых额外больше информации, каждый должен изучить больше случаев, пока отверстие в мозгу большое, длина длинная, если есть какая-либо ошибка в содержании или точке знаний, пожалуйста, исправьте ее!

Рекомендовано в прошлом

Справедливости ради, имея всего 3 строки основного кода CSS для компонента рейтинга, я был настолько впечатлен собой, что у меня онемело на голове🙆‍♂️

Contenteditable и user-modify все еще могут воспроизводиться так 🌚️

CSS ослепляющий эффект волнового движения🌊, это может быть самый простой способ реализовать его? ️

Наконец

Если вы считаете, что эта статья хороша, пожалуйста, не забудьте нажать赞и关注О~😊

Категории