Как использовать псевдоэлементы: before и: after

Я пытаюсь добиться:

с :before и :afterпсевдоэлементы. Может кто-нибудь мне помочь?

i:before {
  content: "";
  background: blue;
  display: block;
  width: 50px;
  height: 1px;
}

i:after {
  content: "";
  background: blue;
  display: block;
  width: 50px;
  height: 1px;
}

<link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">

<div>
  <h3>About Us</h3>
  <i class = "fa fa-comments-o"></i>
</div>

Чего вы пытаетесь достичь?

— 26.04.2018 10:59

Должны ли псевдоэлементы быть такими же, как у элемента i?

— 26.04.2018 11:57

html css font-awesome pseudo-element

26.04.2018 10:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

188

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это работает на моей стороне ... Какая у вас проблема? Может быть, постарайтесь быть более конкретным, выбрав класс, а не только тег.

.fa:before {
 content: "";
 background: blue;
 display: block;
 width: 50px;
 height: 1px;    }

 .fa:after {
 content: "";
 background: blue;
 display: block;
  width: 50px;
  height: 1px;     }

 <div>
  <h3>About Us</h3>
  <i class = "fa fa-comments-o"></i>
 </div>

Я хочу, чтобы значок был посередине строки

— 26.04.2018 11:17

26.04.2018 11:14

Ответ принят как подходящий

Вы можете сделать что-то вроде этого:

h3 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

h3:before,
h3:after {
  content: "";
  position: absolute;
  top: 30px; /* adjust */
  background: blue;
  width: 30%; /* adjust */
  height: 1px; /* adjust */
}

h3:before {left: 0}
h3:after {right: 0}

<link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">

<h3>About Us <i class = "fa fa-comments-o"></i></h3>

26.04.2018 11:30

Другие вопросы по теме

Постобработка оптимизации CSS с использованием Angular-CLI

Как создать псевдонимы миксинов Sass с поддержкой блоков контента?

Сделать нестандартную структуру сетки для начальной загрузки?

AngularJS с использованием конструктора в ng-repeat, но стиль и позиция css не применяются?

Оператор if в данных из DynamoDB для отображения блоков div для определенных значений

В чем разница между block__element__element и block__element-element в БЭМ

Z-index с иконками font awesome не работает

ClientHeight возвращается как 0 при попытке получить размер div

Переключить цвет фона того же div

Добавьте поле в нижнюю границу активной навигационной ссылки, не затрагивая текст

Как использовать псевдоэлементы: before и: after

Ответы 2

Другие вопросы по теме

Похожие вопросы