Как добавить цвет фона только к основному элементу, а не: до и: после

Я пытаюсь оформить заголовок так, чтобы он выглядел так:

Проблема в том, что когда я пытаюсь добавить цвет фона в h2, он также применяется к содержимому :before и :after и охватывает всю ширину страницы. Я хочу, чтобы это применялось только к h2.

Я попытался добавить div внутри h2 и стилизовать его вместо h2.

.styled-heading {
  text-align: center;
  font-size: 32px;
  background: black;
  color: white;
}

.styled-heading:before {
  content: " ";
  display: inline-block;
  margin: 0 0px 8px 0;
  background-color: #999;
  height: 3px;
  width: 140px;
}

.styled-heading:after {
  content: " ";
  display: inline-block;
  margin: 0 0 8px 00px;
  background-color: #999;
  height: 3px;
  width: 140px;
}

<h2 class = "styled-heading">Testing Testing</h2>

Цвет фона не применяется к ::before и ::after. Они находятся внутри h2, который (потому что это display: block) охватывает ширину своего родительского элемента.

— 17.06.2019 21:43

html css

17.06.2019 21:37

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

261

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

Ответы 2

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

Я бы сделал это по-другому без псевдоэлемента:

.styled-heading {
  font-size: 32px;
  color: white;
  display:table; /* to make the element fit the content */
  margin:auto;  /* to center */
  /* The border will be the space for the lines*/
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  
  padding:5px 10px;
  background:
     /* main background cover only the padding*/
    linear-gradient(green,green) padding-box,
    /* the Line cover also the border area (width:100% height:3px)*/
    linear-gradient(blue,blue) center/100% 3px border-box no-repeat; 
}

<h2 class = "styled-heading">Testing Testing</h2>

Вы также можете иметь каждую строку отдельно, если хотите:

.styled-heading {
  font-size: 32px;
  color: white;
  display:table; /* to make the element fit the content */
  margin:auto;  /* to center */
  /* The border will be the space for the lines*/
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  
  padding:5px 10px;
  background:
     /* main background cover only the padding*/
    linear-gradient(green,green) padding-box,
    /* the Line cover also the border area*/
    linear-gradient(blue,blue) left  center/50% 3px border-box no-repeat, 
    linear-gradient(red,red)   right center/50% 3px border-box no-repeat; 
}

<h2 class = "styled-heading">Testing Testing</h2>

Спасибо Темани! Это именно то, что я искал. Я попытался заменить линейный градиент просто «черным», но это не сработало. Нужно ли использовать линейный градиент или можно просто использовать сплошной цвет?

— 17.06.2019 22:09

@ cjk47 вы должны использовать градиент, но поскольку я указываю один и тот же цвет, это похоже на использование сплошного цвета, но весь трюк основан на градиенте

— 17.06.2019 22:28

17.06.2019 21:45

Псевдоэлемент - не способ сделать это. Псевдоэлементы являются частью элемента. Это работает:

.header-pinch {
	position: relative;
	height: 3px;
	width: 500px;
	z-index: 1;
	overflow: visible;
	background: grey;
}
.header-pop {
	position: relative;
	z-index: 2;
	background: black;
	color: white;
	width: fit-content;
	padding: 5px;
        margin: auto;
	transform: translateY(-50%);
}

<br/>
<div class = "header-pinch">
<h2 class = "header-pop">TESTING</h2>
</div>

17.06.2019 21:55

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

Могу ли я ссылаться на селектор bootstrap css с его именем?

Как отобразить значок вместо данных в таблице данных Primefaces?

Подменю CSS <ul><li> не закрывается при нажатии, необходимо поменять местами с закрытой ссылкой

Почему этот эффект наведения на ссылку начинается с середины, а не слева?

Angular cdk перетащите каплю: сохраните стиль элемента после перетаскивания в другой контейнер

Как разместить изображение прямо поверх div?

Как заставить ионный элемент плавать на ионном заголовке

Добавление пользовательского CSS на панель инструментов Wordpress

Как правильно сбросить столбцы сетки-шаблона?

Тег <a> с тегом <img> внутри выстраивается иначе, чем тег <a>, содержащий только текст. Как я могу это исправить?

Как добавить цвет фона только к основному элементу, а не: до и: после

Ответы 2

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

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