Input как реализовать after?

.block { 
  position: relative; 
  display: inline-block; 
} 
 
.block::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  border-left: 2px solid #dde; 
  height: 100%; 
  width: 50px; 
} 
 
.block::after { 
  content: ""; 
  position: absolute; 
  cursor: pointer; 
  margin: auto; 
  top: 0; 
  bottom: 0; 
  right: 20px; 
  color: white; 
  border-right: 1px solid #dde; 
  border-bottom: 1px solid #dde; 
  height: 20px; 
  width: 20px; 
  transform: rotate(-45deg); 
} 
 
.input { 
  border: 2px solid #ddd; 
  padding: 10px 30px 10px 10px; 
  font-size: 24px; 
  line-height: 24px; 
  border-radius: 10px; 
  color: #ddd; 
  outline: none; 
  background-color: transparent; 
} 
 
body { 
  background-color: #111; 
}

<div class="block"> 
  <input class="input" placeholder="E-mail"> 
</div>

.demo { 
  height: 50px; width: 200px; 
  border: 2px solid orange; 
   
  border-radius: 15px; 
  border-bottom-right-radius: 0; 
  border-top-right-radius: 0; 
}

<input class="demo">