Untitled

dabblet.css

body {
    background-color: #fff;
    color: #333;
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1.6em;
}

.example {
    border: 3px solid orange;
    padding: 4px 20px;
}

.example-1 {
}

.example-1:before {
    content: '"';
}

.example-1:after {
    content: '"';
}

.example-2:before {
    content: '(';
}

.example-2:after {
    content: ')';
}

.example-3 {
    position: relative;
}

.example-3:before,
.example-3:after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    content: '';
}

.example-3:before {
    left: 0px;
    background-color: blue;
}


.example-3:after {
    right: 0px;
    background-color: red;
}

dabblet.html

<p>
    <span class="example example-1">For instance</span>
</p>

<p>
    8:05 pm <span class="example example-2">15 mins ago</span>
</p>

<p>
    <span class="example example-3">position: relative;</span>
</p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}