* {
margin: 0;
padding: 0;
}
body {
margin-top: 20px;
}
h1 {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
height: 30px;
line-height: 30px;
font-size: 33px;
}
h1:after {
content: 'My latest work';
height: 100%;
width: 100%;
position: absolute;
top: 0;
margin-left: 20px;
text-align: left;
font-size: 12px;
color: white;
padding: 0 0 0 10px;
}
h1:before {
content: 'My latest work';
height: 100%;
width: 100%;
position: absolute;
top: 0;
margin-left: calc(-100% - 20px);
text-align: right;
font-size: 12px;
color: white;
padding: 0 10px 0 0;
}
h1:after,
h1:before {
background-color: lightgray;
background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
}
<h1>My latest work</h1>