Basic CSS Help - Removing a shape

I'm trying to disable the triangles above the element labels via css. To view these, press a link, (hear, see, savor) There is dotted line and text. On the text there is a little red triangle/arrow that is not centered.I have done it successfully for the menus, but not 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;
}

This code above does not work for disabling it on 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 worked for disabling it on the menu.

That doesn't work. When I edit the HTML, just under inspect element in my browser, if I delete the span tags it works. Also, I want to center the text for the element labels. Go to the savor page to see. I want the savor to be on one line, and then a moment to be on the other, while remaining center. How can I do so? Thank you so much!