h1 Accessible Medium Style Dividers
     | After I saw Rafal Chmiel's 
       | pen with Medium style dividers 
     | on the CodePen frontpage I thought to myself <q>This should be possible with simpler markup that is accessible</q>.
  h2 Semantic HTML
  p Rafal states that the code for his pen is taken directly from Medium; so we shall not fault him for any errors in the markup. Medium uses a simple <code>div</code> with a <code>class</code> of <code>divider</code>. This works very well for the visual effect they are after. A sighted user will clearly see that this is the start of a new section. 

  p However, this information is not communicated to assistive technologies (AT) because it has no meaning; classes don't convey any information other than <q>Hey, you can select me with CSS!</q>

    | Further more, they use an anchor to markup what clearly should be a header. AT users tend to 
    a(href="") scan a page by headings
    | ; not anchors.

  h2 Effortless Style
    | Semantic HTML means that we don't need to depend on meaningless classes to style our content. 
    a(href="") Heydon Pickering
    | coined the term Effortless Style in 2014 
    a(href="") at CSS Day
    | . In essense it is the separation of concerns; a best practice according to the W3C.

    | You could think of it as smart CSS. In this pen we know the title of our sections are right after an <code>hr</code>—or horizontal rule. With this knowledge we can utilize the 
    a(href="") adjacent sibling combinator
    | to select our heading: <code>hr + h2</code>.
  h2 Alternative technique
    | After a comment from 
    a(href="") ZCKVNS
    | , I decided to try 
    a(href="") an alternative technique
    | . The alternative uses a span to center text, instead of a <code>transform: translateX()</code>.

  p If you really want to keep markup to a minimum, there is an alternative border method included in this—the one you're reading—pen. You can find it in the CSS, near the end.
View Compiled
// Some vars
$link-color: #f52e62;
$text-color: #3f517e;
$hr-color:   rgba(0,0,0,0.35);
$hr-text-color: #453986;

$letter-spacing: .32em;

$background-color: #fff;

hr {
  display: block;
  margin: 50px 0 -15px;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: $hr-color;
  + h2 {
    display: inline-block;
    position: relative;
    left: 50%;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid $hr-text-color;
    //box-shadow: inset 0 0 0 1px $hr-text-color;
    transform: translateX(-50%);
    color: $hr-text-color;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: $letter-spacing;
    text-align: center;
    text-transform: uppercase;
    background-color: $background-color;
    // Cancel out offset created by letterspacing
    &::first-letter {
      margin-left: $letter-spacing;

/* Alternative transform: translate */
hr + h2 {
  border-width: 1px 0;
  &::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: $hr-text-color;
    content: '';

  &::before {
    left: 0;

  &::after {
    right: 0;

// Unimportant bits
* {
  box-sizing: border-box;

body {
  margin: 0;
  padding: 0;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  color: $text-color;
  font-family: Helvetica Neue, Helvetica, Arial sans-serif;
  background-color: $background-color;

article {
  margin: 20px 10px;
  @media (min-width: 30em) {
    margin: 40px 0;
    padding: 0 10px;
    width: 30em;

a {
  color: $link-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;

code {
  font-size: 1.1em;

h1 {
  margin: 0 0 1em;
  color: #44388b;

p {
  padding: 0 10px;
  // This is just to get rid of the needles p's CodePen drops in.
  &:empty {
    display: none;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.