<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
p{
width: 100px;
text-align: justify;
text-decoration: underline;
word-break: break-all;
}
</style>
</head>
<body>
<p>
Как сделать эффект text-decoration: underline на всю ширину блока, а не только под текстом?
</p>
</body>
</html>­ (мягкий перенос)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
padding: 50px;
}
.bm{
height: 20px;
width: 100px;
background: pink;
border-radius: 4px 0 0 4px;
display: inline-block;
}
.bm:after{
content: "";
display: inline-block;
float: right;
border: #fff solid 10px;
border-top-color: pink;
border-left-color: pink;
border-bottom-color: pink;
background: #fff;
}
</style>
</head>
<body>
<div class="bm"></div>
</body>
</html><div id="wrap">
<div class="fullwidth"></div>
</div>#wrap{
margin: 0 auto;
width: 80%;
height: 1000px;
background-color: green;
}
div.fullwidth{
height: 100px;
background-color: red;
margin: 400px -12.5% 0 -12.5%;
}