line-height tests

work in progress.

by Rykus0

HTML

<p class="">
    <span> 
        <span class="control"></span>
        Lorem <br><span class='small'><span class="control"></span>ipsum</span> <br>dolor sit amet, consectetur adipisicing elit. Repellat reprehenderit non ab fugit repellendus unde consectetur blanditiis tempore veritatis dolorem eligendi sit eum sed beatae veniam adipisci alias fugiat maiores.</span></p>

CSS

* {
    padding:0;
    margin:0;
}

.control {
    position:absolute;
    display: inline-block;
    /* float: left; */
    height: 1em;
    width: 1em;
    background-color: #000;
    border-color: #0f0;
    border-width: calc( ((1.5 * 1em) - 1em) / 2) 0;
    border-style: solid;
    vertical-align: baseline;
}

p {
    font-size: 24px;
    line-height: 150%;
    background-color: #789;
    text-decoration: underline;
}
.small .control {
    
}

span {
    position: relative;
}

p > span {
    text-decoration: overline;
    background-color: #f00;
}
.normal {
    background-color: #987;
}

.small {
    font-size: 50%;
    background-color: #00f;
}