<body>

<div class="titlebox"><span>Lines Beside Title</span></div>

</body>
</html>
body {background:#bdf;}
.titlebox {
    display:table;
    width:100%;
/*    outline:1px dotted red;  /* TEST Outline */
}
.titlebox span {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    font-size:1.5em;
    font-weight:bold;
    font-family:Verdana,sans-serif;
    white-space:nowrap;
    padding:.125em .375em;
}
.titlebox::before,
.titlebox::after {
    content:"";
    display:table-cell;
    width:50%;
/*    outline:1px solid lime;  /* TEST Outline */
    vertical-align:middle;
/*    background:url("imgs/reddot3.png") repeat-x 0 49%;  /* can use a background image, if preferred */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(45%, rgba(0,0,0,0)), color-stop(46%, rgba(0,0,255,1)), color-stop(54%, rgba(0,0,255,1)), color-stop(55%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0)));  /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,1) 46%, rgba(0,0,0,1) 54%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%);    /* Chrome10+,Safari5.1+ */
    background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(180,180,180,1) 46%, rgba(180,180,180,1) 54%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%);    /* FF3.6+ */
	background:-ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,1) 46%, rgba(0,0,0,1) 54%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%);    /* IE10+ */
    background:-o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,1) 46%, rgba(0,0,0,1) 54%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%);    /* Opera 11.10+ */
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(180,180,180,1) 46%, rgba(180,180,180,1) 54%, rgba(0,0,0,0) 55%), rgba(0,0,0,0) 100%);    /* W3C */
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.