JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yunikki.com/wp-content/themes/simplicity-child/style.css">
<div class="article">
    <p>サイズを決めてしまうと3行で全体が表示されます</p>
     <h1 class="entry-title">授乳中乳頭に白い点を発見！白斑が痛い時の対処と飲んでくれないときは？</h1>
     
</div>

<div class="article">
    <p>1行の時はこんな感じ</p>
    <h1 class="entry-title">授乳中乳頭に白い点を発見！</h1>
</div>

<div class="article">
    <p>タイトルの長さ(h1の高さ)によって自動化<br>beforeでなくspanを挿入しています</p>
    <h1 class="entry-title">授乳中乳頭に白い点を発見！</h1>
    <h1 class="entry-title">授乳中乳頭に白い点を発見！授乳中乳頭に白い点を発見！</h1>
    <h1 class="entry-title">授乳中乳頭に白い点を発見！授乳中乳頭に白い点を発見！授乳中乳頭に白い点を発見！</h1>
</div>

CSS

.article h1 {
    padding-left: 3em;
    width: 500px;
}
.article h1::before {
    background-repeat: no-repeat;
    background-position: top center;
    width: 3em;
    height: 100%;   
}

/*test用*/

.article p {
    margin: 2rem 0 1rem;
    width: 100%;
    background-color: #F00;
    color: #fff;
}

.article:nth-of-type(3) h1::before {
    display: none;
}

.article:nth-of-type(3) h1 {
    /*padding-left: 0;*/
    position:relative;
}

.article:nth-of-type(3) .test {
    background-image: url("http://yunikki.com/wp-content/uploads/2015/10/h1-e1445990470486.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

JavaScript

(function($){
	$(function(){
    	$(".article:nth-of-type(3) h1").prepend("<span class='test' />");
        $(".article:nth-of-type(3) h1").each(function(){
        	 var h1_h = $(this).height(),
                 h1_w = ( h1_h -10 ) * 87 / 80;
            
            $(this).css({
            	"padding-left" : h1_w + 4
            });
            
            $(this).children(".test").css({
            	width: h1_w,
            	height: h1_h
            });
            
        });
              
    });
})(jQuery);