Как проще сверстать такие элементы

[paralex]

Верстаю шаблон и в нем присутствую однотипные элементы такого вида

 

 

Попробовал несколько вариантов, и пришел вот к такому http://jsfiddle.net/paralex/7sad0kte/ пара свойств остается одинаковых, но у каждого устанавливаю свои отступы, шрифт, и меняю еще картинку диогональной стрелочке по цвету. Вроде меня это даже устроило.

Но столкнулся с проблемой, что в списке однотипных элементов если заголовок длинный в 2 строки то у меня все съезжает вниз http://jsfiddle.net/paralex/7sad0kte/1/ а должно наоборот вверх а стрелочка подчеркивания оставаться на своем месте как на самом нижнем элементе на картинке.

 

Как можно решить это, что-то не могу придумать, либо просто не вижу очевидного.

 

И может быть посоветуете как лучше сделать данные элементы?)

Edited October 5, 2014 by paralex

[Laroxx12]

Error 404

We're truly sorry, but there is no such page.

[paralex]

почему-то из-за пробела в ссылке сообщение на этом месте оборвалось автоматом. после удаления пробела все само появилось

[SelenIT]

А что должно происходить при длинном тексте? Кружок должен оставаться на уровне первой строки, а диагональная линия должна становиться длиннее? И, соответственно, точка излома линии должна сдвигаться вправо? А начало текста должно быть над одним и тем же местом или над точкой излома линии?

[Cei]

Растянуть стрелку-палочку и она спрячется под кружок. http://jsfiddle.net/7sad0kte/2/

.sidebar-item-title span:before{	left:-20px;	width:20px;	height:20px;}

Edited October 5, 2014 by Cei

[paralex]

А что должно происходить при длинном тексте? Кружок должен оставаться на уровне первой строки, а диагональная линия должна становиться длиннее? И, соответственно, точка излома линии должна сдвигаться вправо? А начало текста должно быть над одним и тем же местом или над точкой излома линии?

 

Вот если посмотреть на картинку которую приложил, и сравнить второй и последний элемент. То вот у меня при моей верстке http://jsfiddle.net/paralex/7sad0kte/1/ первая строка остается на том же уровне, а вторая сдвигает все вниз, а можно ли сделать чтоб было как на картинке на последнем элементе, чтоб первая строка сдвигалась вверх (без указания отдельного класса элементам в 2 строки). Чтоб линия с изгибом оставалась на своем месте всегда.

 

Растянуть стрелку-палочку и она спрячется под кружок. http://jsfiddle.net/7sad0kte/2/

Не совсем то что хотелось. Но за растягивание элемента спасибо, что-то я хотел просто стрелочку побольше вырезать изначально всем А то что она прячется это и сделано специально

[Cei]

Вот если посмотреть на картинку которую приложил, и сравнить второй и последний элемент. То вот у меня при моей верстке http://jsfiddle.net/...lex/7sad0kte/1/ первая строка остается на том же уровне, а вторая сдвигает все вниз, а можно ли сделать чтоб было как на картинке на последнем элементе, чтоб первая строка сдвигалась вверх (без указания отдельного класса элементам в 2 строки). Чтоб линия с изгибом оставалась на своем месте всегда.

Тогда так: http://jsfiddle.net/7sad0kte/3/

.sidebar-item-title span{	position:absolute;        bottom: -35px;}

Но это как-то не очень. Контент из потока выпадает.

[paralex]

 

Вот если посмотреть на картинку которую приложил, и сравнить второй и последний элемент. То вот у меня при моей верстке http://jsfiddle.net/...lex/7sad0kte/1/ первая строка остается на том же уровне, а вторая сдвигает все вниз, а можно ли сделать чтоб было как на картинке на последнем элементе, чтоб первая строка сдвигалась вверх (без указания отдельного класса элементам в 2 строки). Чтоб линия с изгибом оставалась на своем месте всегда.

Тогда так: http://jsfiddle.net/7sad0kte/3/

.sidebar-item-title span{	position:absolute;        bottom: -35px;}

Но это как-то не очень. Контент из потока выпадает.

 

Спасибо, думал про что-то подобное, но мысль тогда прошла мимо.

Мне так и выглядит как не сильно нравится, но сделаю 2 варианта, какой оставить выберут сами