Как грамотно стилизовать h1 средствами CSS?

.headline {
	margin: 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}

  .headline:before,
  .headline:after {
	  content: "";
	  position: relative;
	  display: inline-block;
	  vertical-align: middle;
	  width: 100%;
	  height: 30px;
	  background-size:
		  100% 1px,
		  30px 30px;
  }

	.headline:before {
		right: .5em;
		margin-left: -100%;
		background: 
			linear-gradient(90deg, #000, #000) repeat-x center,
			radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat right -5px center;
		 background-size:
		  100% 1px,
		  30px 30px;
	}
	.headline:after {
		left: .5em;
		margin-right: -100%;
		background: 
			linear-gradient(90deg, #000, #000) repeat-x center,
			radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat left -5px center;
		 background-size:
		  100% 1px,
		  30px 30px;
	}