Как сверстать данный элемент?

224

26 июня 2017, 18:01

Как сверстать такой элемент, чтобы линия была на всю ширину?

Answer 1

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

hr { 
  width: 100%; 
  height: 3px; 
  background-color: black; 
  border: 0px; 
} 
 
span { 
  display: block; 
  position: absolute; 
  width: 100px; 
  background-color: black; 
  color: white; 
  margin-top: -28px; 
  margin-left: -50px; 
  padding: 10px; 
  left: 50%; 
  text-align: center; 
  border-radius: 10px; 
}

<br /> 
<br /> 
<br /> 
<hr /> 
<span>Text</span>

Answer 2

Вот так

.test { 
  text-align: center; 
  position: relative; 
} 
 
.test:after { 
  content: ""; 
  display: block; 
  height: 2px; 
  background-color: #555555; 
  width: 100%; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  margin: auto; 
  z-index: 1; 
} 
 
.test span { 
  border-radius: 6px; 
  background-color: #555555; 
  color: #ffffff; 
  display: inline-block; 
  padding: 0 15px; 
  position: relative; 
  z-index: 2; 
}

<div class="test"><span>TEST</span></div>

Answer 3

div { 
	position: relative; 
	text-align: center; 
} 
 
div::before { 
	content: ""; 
	position: absolute; 
	width: 100%; 
	top: 50%; 
	left: 0px; 
	transform: translateY(-50%); 
	border: 1px solid rgb(48,48,48); 
} 
 
div::after { 
	content: attr(title); 
	background-color: rgb(48,48,48); 
	padding: 10px; 
	display: inline-block; 
	color: white; 
	position: relative; 
	z-index: 1; 
	border-radius: 6px; 
	min-width: 150px; 
}