Избегайте разрыва строки между контентом и: после

Question

У меня проблема с разрывом строки между содержимым HTML-элемента, а именно: после содержимого. Это сортируемый стол, а в верхней части стола - небольшая стрелка.

Вы можете увидеть его в этой скрипке http://jsfiddle.net/ceuwob93/ или на этой картинке:

Очевидно, что я не хочу, чтобы разрыв строки перед стрелкой.

table { 
    width: 300px; 
} 
thead { 
    background-color: #ddd; 
    border-bottom: 1px solid #bbb; 
} 
th.sort-down:after { 
    content: ''; 
    float: right; 
    margin-top: 7px; 
    border-width: 0 4px 4px; 
    border-style: solid; 
    border-color: #404040 transparent; 
} 

Answer 1

Вы можете сделать, как предложено и дать столбцы фиксированной ширины, или если вы хотите более гибкий подход, вы можете использовать позиционирование для вашего: после элемента.

table { 
 
     width: 300px; 
 
    } 
 
    thead { 
 
     background-color: #ddd; 
 
     border-bottom: 1px solid #bbb; 
 
    } 
 
    .sort-down { 
 
     padding-right: 1.5em; 
 
     position:relative; 
 
    } 
 
    .sort-down:after { 
 
     content: ''; 
 
     position:absolute; 
 
     top:7px; 
 
     right:5px; 
 
     border-width: 0 4px 4px; 
 
     border-style: solid; 
 
     border-color: #404040 transparent; 
 
    }

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th class="sort-down">Problem</th> 
 
     <th>Column 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Some long long long Text</td> 
 
     <td>Yes</td> 
 
     <td>Some other long long long text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

http://jsfiddle.net/ceuwob93/1/

position:absolute !important; 

просто изменить поплавок в положение абсолютной.

Answer 3

Вместо того, чтобы плавать псевдоэлемент, попробуйте установить его абсолютно.

table { 
 
    width: 300px; 
 
    vertical-align: top; 
 
} 
 
thead { 
 
    background-color: #ddd; 
 
    border-bottom: 1px solid #bbb; 
 
} 
 
.sort-down { 
 
    position: relative; 
 
    padding-right: 12px; 
 
} 
 
.sort-down:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    border-width: 0 4px 4px; 
 
    border-style: solid; 
 
    border-color: #404040 transparent; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th class="sort-down">Problem</th> 
 
     <th>Column 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Some long long long Text</td> 
 
     <td>Yes</td> 
 
     <td>Some other long long long text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>