I have created a pseudo element to sit over an unordered list, the css is as follows:

```css
ul.pricing-column {
  width: 200px;
  height: 400px;
  background: red;
  position: relative;
  margin: 50px;
}

.pricing-column.featured::after {
  content: "Most Popular";
  background: #52BDE6 none repeat scroll 0% 0%;
  color: #FFF;
  width: 80px;
  border-radius: 100%;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1000;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9em;
  line-height: 0.9em;
  padding: 10px;
  display: inline-block;
  height: 80px;
  text-align: center;
}
```

```html
<ul class="pricing-column featured">
</ul>
```

However, with this, the text inside the pseudo-element sits at the top of my element - is there a way to center it vertically?

Here is [a fiddle](https://jsfiddle.net/6dqxt2r3/)