custom input file in bootstrap 4 not show button

Question

When I use Custom input file in bootstrap 4, don't change my input and don't show browse button.

file-browser

<label class="custom-file">
    <input type="file" id="Image" class="custom-file-input">
    <span class="custom-file-control"></span>
</label>

.custom-file

position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;

.custom-file-input

min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;

.custom-file-control

position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;

Answer 1

As far as i've checked - you need to insert the :before and :after pseudoelements - then it works.

.custom-file-control:before{
  content: "Browse";
}
.custom-file-control:after{
  content: "Add files..";
}

http://codepen.io/powaznypowazny/pen/jBqzgR