Как уменьшить или увеличить border?

Question

[freeman0204]

Есть такой код:

<h3>Рафаэль Надаль проиграл сотой ракет...</h3>

h3 {
	border-bottom: 3px solid red;
	width: 40%;
	background-color: #ccc;
	padding: 20px;
}

Нужно например, уменьшить нижний border или увеличить что бы заходил за рамки блока или наоборот был меньше. Как это можно сделать?

Answer 1

[Mikh Solovyev]

Через бордер никак, поптобуй через before например так
codepen.io/DreamLike/pen/RPzjVy

Answer 2

[Владимир]

Самим borderом не получится, отдельным элементом или псевдоэлементом можно

Comments

[freeman0204]

Каким именно псевдоэлементом? Хочется сделать это элегантно, а не как костыль.

[Владимир]

гуглите :after

Answer 3

[Andrew]

Например - jsfiddle.net/b8q3kmbx

Comments

[Владимир]

Полагаю, имелось в виду такое jsfiddle.net/br3t/b8q3kmbx/1

[freeman0204]

Владимир: Да такое. Или наоборот меньше. Но суть я понял спасибо!