Как сделать полоску под текстом ?

 

Содержимое css

	#copyright {
	color: #848484;
	text-align: right;
	line-height: 22px;
	float: right;
               height: 1px;
               background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
               background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
               background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
               background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0));
}

 

Сам скрин:

Тут градиент задан через бэкграунд самого элемента, и высота ему задана 1px - отсюда и иллюзия, что это этакая линия.

Чтобы сделать снизу... (я так понимаю, сверху и снизу такая линия должна быть одновременно?)

 

 

1) проделать то же самое с псевдоэлементом :after

 

что-то вроде этого:

#copyright:after {
 display:block;
 content:"";
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0));
}

результат: http://embed.plnkr.co/FgfrCb

 

2) создать этот эффект не через бэкграунд, а через бордер

 

пример: http://embed.plnkr.co/Vf5U3n

 

html примера:

<div class="box">пример рамки</div>

css примера:

.box{
text-align: center;
width: 300px;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
-webkit-border-image: -webkit-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image: linear-gradient(to left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image-slice: 1;
}

Нет, мне только снизу.

С новым div'ом не получится, так как это уже будет новый блок.

Нет, мне только снизу.

С новым div'ом не получится, так как это уже будет новый блок.

Тогда по первому варианту: удалить лишний код из #copyright, оставив только в #copyright:after

 #copyright {
 color: #848484;
 text-align: right;
 line-height: 22px;
 float: right;
 }
#copyright:after {
 display:block;
 content:"";
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0));
}

 

По второму: оставить только нижнюю границу

.box{
text-align: center;
width: 300px;
border-width:0;
border-bottom: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
-webkit-border-image: -webkit-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image: linear-gradient(to left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image-slice: 1;
}

спасибо