<div class="wrapper">

        <h1>Using :target with Transitions</h1>
    
      <nav>
            <a href="#one">One</a>
            <a href="#two">Two</a>
            <a href="#three">Three</a>
            <a href="#four">Four</a>
        </nav>
        
        <p id="one">Number One</p>
        
        <p id="two">Number Two</p>
        
        <p id="three">Number Three</p>
        
        <p id="four">Number Four</p>
    
    </div>

.wrapper {
  position:relative;
  margin:0 auto;
  width:600px;
  font-family:Arial, Helvetica, sans-serif;
}

h1 {
  text-align:center;
}

nav {
  display:block;
  margin-top:30px;
  text-align:center;
}

nav a {
  padding:3px 5px;
  background:#ccc;
  text-decoration:none;
  border-radius:5px;
}

p {
  color:black;
  text-align:center;
  transition:all 1s ease;
}

p:target {
  color:red;
  font-size:40px;
}