Is it possible to remove the triangles above the element labels using CSS? To view them, click on a link (hear, see, savor). There is a dotted line and text with a small red triangle/arrow that is not centered. I have managed to disable them for the menus, but not for the element labels. The website in question is: tedmartinez.com
.content-title span:before {
display: none;
}
.content-title span:before {
content: none;
}
span.content-title {
display:none;
}
span {
display:none;
}
.content-title span:before {
content: none;
}
#content-title span:before {
content: none;
}
The CSS code above does not seem to work for removing the triangles from the element/content titles.
/*removing all arrows and triangles from Tripod*/
nav.main-menu > ul > li.selected:before, nav.main-menu > ul > li.active:before {
content: none;
}
nav.main-menu>ul>li:last-child:after{
content: none;
}
.sf-menu > li:hover > ul:before,
.sf-menu > li.sfHover > ul:before {
content: none;
}
nav.main-menu > ul > li:before {
content: none;
}
.widget h5.widget-title span:before {
content: none;
}
#reply-title span:before, #comments-title span:before, .related-title span:before {
content: none;
}
/*tripod menu arrows while active*/
nav.main-menu > ul > li.selected:before, nav.main-menu > ul > li.active:before {
content: none;}
/*tripod menu arrows while hover*/
nav.main-menu > ul.sf-menu li:hover:before, nav.main-menu > ul.sf-menu li.sfHover:before{
content: none;}
This method successfully removed the triangles from the menu.
Unfortunately, the method mentioned above does not work. By editing the HTML under inspect element in my browser, deleting the span tags seems to do the trick. Additionally, I would like to center the text for the element labels. Please visit the savor page to see what I mean. I want "savor" to be on one line, and "moment" to be on the other, while keeping them centered. How can I achieve this? Thank you for your help!