Как растянуть div по ширине родителя в данном случае?

Question

[Александр Ситник]

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

.profile{
	width: 825px;
}
	.profile_head{
		display: flex;

	}
		.profile_logo{
			width: 148px;
			height: 148px;
			background-color: #3d6cb0;
			border-radius: 50%;
		}
		.all_left_titles{
			font-family: 'Conv_Myriad-Pro-Bold';
			font-size: 82px;
			color: #3d6cb0;
			display: flex;
			align-items: center;
			text-transform: uppercase;
			&:after{
				width: 100%;
				height: 13px;
				background-color: #3d6cb0;
				content: '';
			}
		}

НО! Элемент after становится с нулевой шириной и не растягивается. Как решить?

Answer 1

[display: block]

https://codepen.io/anon/pen/RYWdBw

Comments

[Сергей]

Ты то нам как раз и нужен)

[Александр Ситник]

Добавил after-у display: block
Пока не работает

[Сергей]

Александр Ситник, мб кэш забыли почистить?

[Александр Ситник]

Все сработало, спасибо.

Answer 2

[Сергей]

Боюсь тут нет экстрасенсов, чтобы не видя верстки вам что-то по стилям наванговать. Ну задайте псевдо-элементу after - "display: block;", как вариант.

Answer 3

[Alexander]

Добавьте display: block; для after.
P.S. пока писал уже ответили))

Answer 4

[Александр Ситник]

Нужно было "after" задавать не тексту, а всей шапке. Все сработало

Comments

[Сергей]

Нужно было присылать верстку, а не только стили...

[Александр Ситник]

Сергей, учту:)