Можно ли ввести границу CSS

Question

Я делаю сайт в настоящий момент, и у меня возникла проблема. В моем коде CSS у меня есть граница, оставленная некоторыми социальными значками. Он делает 50-пиксельный блок рядом с моим социальным контентом.

Возможно ли, чтобы я набрал 50-кратную рамку? Я хочу использовать внешний шрифт, который имеет иконки в шрифте и использовать их в поле пограничного

CSS:

google { 
border-left: 50px solid #db4a39; 
color: #db4a39; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 

} 

Если я не могу ввести в границы кто-то может предложить альтернативный вариант для меня?

Answer 1

Создание 50px шириной <div> слева от текущего, а не границы, является довольно хорошим решением: http://jsfiddle.net/KzMKB/

Изменить: моя мотивация для дополнительных <div> заключается в том, что этот вид вещей принадлежит, как мне кажется, дочернему элементу, а не обушенному обувью на границе. Это семантически логично, и легко добавить любой контент, который вы хотите, в <div>.

Answer 2

Вы можете перемещать текст в рамку с помощью свойства text-indent.

#border-box { 
    text-indent:-10px; 
} 

Answer 3

Вы можете использовать: перед псевдоэлементом, если у вас нет контроля над разметкой.

Удалить border с оригинальным элементом и комплектом margin-left до 50px;

google { 
    margin-left:50px; 
    color: #db4a39; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
google:before { 
    content: "hello"; 
    margin-left:-50px; 
    background-color: #db4a39; 
    color: black; 
    display: block; 
    width:50px; 
    height:100%; 
} 

Посмотреть полный пример:

http://jsfiddle.net/6zX8y/1/