Vertically centering :after content in Bootstrap 3 panel-heading

Question

After adding chevrons to the panel-heading of collapsable Bootstrap 3 panels, I'm trying to get them vertically centered.

This is what the panel-heading looks like:

<div class="panel-heading">
  <h3 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseActivity1" class="collapsed">
      Truck maintenance<br />
      <small>Monday t/m Wednesday</small>
    </a>
  </h3>
</div>

As you can see in this JSFiddle, the alignment isn't quite right when the heading consists of multiple lines.

Q1: How can I vertically center the chevron in the panel-heading? Can't seem to find a solution that works with both multiple lines and single lines.

Q2: What's the recommended HTML markup for a subtitle as seen in the example? Using an h4 underneath the h3?

can you change the markup? ie would you be averse to adding a span to the anchor? — Pete, Jul 15 '14 at 13:49
Yes, I can change the markup. I'm learning my way around HTML and CSS at this point, creating my first little project using Bootstrap. Would like to use proper semantics. What would be your advice? — Willem-Aart, Jul 15 '14 at 14:00

score 1 · Accepted Answer · answered Jul 15 '14 at 13:48

For pseudo elements such at these, absolute positioning combined with CSS transforms is often the best option

JSfiddle Demo

CSS

.panel-heading a {
    text-decoration: none;
    display: block;
    position: relative;
}
.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    position: absolute;
    top:50%;
    left:100%;
    -webkit-transform:translate(-100%, -50%);
    transform:translate(-100%, -50%);
    color: grey;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}

Transforms are IE9 and up CanIUse.com but fallbacks with negative margins are available.

Vertically centering :after content in Bootstrap 3 panel-heading

1 Answers1