<div class="wrapper">
  
  # Test
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsa iusto minus enim id iste maxime debitis nam, nihil [mollitia](# "attachment") odit quisquam. Aspernatur blanditiis corporis quod quae? Possimus, praesentium nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim quidem nobis facere minus sint est, consequatur ratione doloribus praesentium voluptate facilis fugiat? Debitis ut delectus ipsam architecto voluptatibus velit optio.

  [Normal Link](http://google.com)
  
  [Datenschutz.pdf (64kB)](http://google.de "attachment")
  
  [Attachment](http://google.de "test attachment")
  
  [Datenschutz.pdf (64kb)](http://google.de "download")

</div>

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  background-color: #e0e6e6;
}

.wrapper {
  background-color: #fff;
  max-width: 740px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
  box-shadow: 0 10px 10px rgba(0,45,60,.3);
  min-height: 100vh;
  >* {
    margin-bottom: 20px;
  }
}

a {
  display: inline-block;
  text-decoration: none;
  &[title~="attachment"] {
    color: #000;
    padding: 10px;
    background-color: #e0e6e6;
    border-radius: 3px;
    border: 1px solid #e0e6e6;
    transition: all 0.3s ease;
    &:before {
      content: "📎";
      padding-right: 10px;
    }
    &:hover {
      background-color: #fff;
    }
  }
  &[title~="download"] {
    width: 100%;
    background-color: #e0e6e6;
    border: 1px solid #e0e6e6;
    border-radius: 3px;
    padding: 40px 20px;
    color: #000;
    text-align: center;
    transition: all 0.3s ease;
    &:before {
      content: "📎";
      padding-right: 10px;
    }
    &:hover {
      background-color: #fff;
    }
  }
}